<template>
  <el-dialog
    :title="dialogTitle"
    top="10vh"
    :visible.sync="dialogVisible"
    close-on-press-escape
    :before-close="cancel"
    @open="init"
  >
    <div v-loading="loading" class="purchase-container" style="padding: 10px;">
      <el-form
        ref="purchase"
        :model="purchase"
        class="form-container"
        :rules="AddRules"
        label-width="80px"
      >
        <el-form-item label="材料编号" prop="materialId">
          <el-input v-model="purchase.materialId" readonly />
        </el-form-item>
        <el-form-item label="材料名称" prop="name">
          <el-select
            v-model="purchase.name"
            placeholder="请选择材料"
            :loading="selectLoading"
            value-key="id"
            :readonly="id?false:true"
            @visible-change="getSelectList"
            @change="getMaterialInfo"
          >
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.value"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="材料介绍" prop="introduction">
          <el-input v-model="purchase.introduction" readonly />
        </el-form-item>
        <div class="predict-box">
          <el-form-item label="预估单价" prop="predictPrice">
            <el-input v-model="purchase.predictPrice" />
          </el-form-item>
          <el-form-item label="预估数量" prop="predictNum">
            <el-input v-model="purchase.predictNum" />
          </el-form-item>
          <el-form-item label="预估总价" prop="predictTotal">
            <el-input v-model="purchase.predictTotal" />
          </el-form-item>
        </div>
        <div v-if="purchase.status!=='已分发'||isBuyer" class="real-box">
          <el-form-item label="实际单价" prop="realPrice">
            <el-input v-model="purchase.realPrice" />
          </el-form-item>
          <el-form-item label="实际数量" prop="realNum">
            <el-input v-model="purchase.realNum" />
          </el-form-item>
          <el-form-item label="实际总价" prop="realTotal">
            <el-input v-model="purchase.realTotal" />
          </el-form-item>
        </div>
        <el-form-item label="状态" prop="status">
          <el-select v-model="purchase.status" placeholder="请选择状态">
            <el-option v-if="!isBuyer" label="待分发" value="待分发" />
            <el-option v-if="!isBuyer" label="已分发" value="已分发" />
            <el-option v-if="!isBuyer" label="已完成" value="已完成" />
            <el-option v-if="isBuyer" label="送审" value="送审" />
          </el-select>
        </el-form-item>
        <el-form-item v-show="purchase.status==='已分发'" label="操作人" prop="operator">
          <el-select
            v-model="purchase.operator"
            placeholder="请选择操作人"
            :loading="selectLoading"
            @visible-change="getOperatorSelect"
          >
            <el-option
              v-for="item in options2"
              :key="item.username"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="purchase.status!=='已分发'" label="采购时间" prop="time">
          <el-date-picker
            v-model="purchase.purchaseDate"
            type="date"
            placeholder="选择采购时间"
          />
        </el-form-item>
        <el-form-item style="margin-bottom: 0px;">
          <el-button style="float: right;margin-left: 10px;" type="primary" @click="submitForm('purchase')">{{ id? '修改':'添加' }}</el-button>
          <el-button style="float:right;" @click="cancel('purchase')">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
// import { parseTime } from '@/utils'
import { addPurchase, modifyPurchase, getBuyerList, getPurchaseInfo } from '@/api/purchase'
import { getMaterialList, getMaterialInfo } from '@/api/materialInventory'
import { Message } from 'element-ui'

export default {
  name: 'PurchaseDialog',
  props: {
    dialogVisible: Boolean,
    dialogTitle: {
      type: String,
      default() {
        return ''
      }
    },
    id: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      isBuyer: this.$store.getters.roles.indexOf('buyer') !== -1,
      purchase: {
        materialId: '',
        introduction: '',
        name: '',
        predictPrice: '',
        predictNum: '',
        predictTotal: '',
        realPrice: '',
        realNum: '',
        realTotal: '',
        status: '',
        operator: '',
        purchaseDate: ''
      },
      selectLoading: false,
      options1: [],
      options2: [],
      AddRules: { // 对话框表单验证
        name: [{ required: true, message: '材料名称不能为空', trigger: 'blur' }],
        introduction: [{ required: true, message: '材料介绍不能为空', trigger: 'blur' }],
        predictPrice: [{ required: true, message: '预估单价不能为空', trigger: 'blur' }],
        predictNum: [{ required: true, message: '预估数量不能为空', trigger: 'blur' }],
        predictTotal: [{ required: true, message: '预估总价不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    init() {
      if (this.id) {
        this.loading = true
        getPurchaseInfo(this.id).then(res => {
          if (res) {
            this.purchase.materialId = res.data.data[0].materialId
            getMaterialInfo(res.data.data[0].materialId).then(res => {
              this.purchase.name = res.data.data.name + ':' + res.data.data.introduction
              this.purchase.introduction = res.data.data.introduction
            })
            this.purchase.predictPrice = res.data.data[0].predictPrice
            this.purchase.predictNum = res.data.data[0].predictNum
            this.purchase.predictTotal = res.data.data[0].predictTotal
            this.purchase.realPrice = res.data.data[0].realPrice
            this.purchase.realNum = res.data.data[0].realNum
            this.purchase.realTotal = res.data.data[0].realTotal
            this.purchase.status = res.data.data[0].status
            this.purchase.operator = res.data.data[0].operator
            this.purchase.purchaseDate = res.data.data[0].purchaseDate
            setTimeout(() => {
              this.listLoading = false
            }, 2 * 1000)
          }
          this.loading = false
        })
      }
    },
    getSelectList() {
      this.selectLoading = true
      getMaterialList().then(res => {
        if (res) {
          const list = res.data.list
          const optionList = []
          list.forEach(item => {
            const obj = {}
            obj.value = item.name + ':' + item.introduction
            obj.id = item.id
            optionList.push(obj)
          })
          this.options1 = optionList
          setTimeout(() => {
            this.selectLoading = false
          }, 2 * 1000)
        }
        this.selectLoading = false
      })
    },
    getOperatorSelect() {
      getBuyerList().then(res => {
        if (res) {
          const list = res.data.list
          this.options2 = list
        }
      })
    },
    getMaterialInfo(payload) {
      getMaterialInfo(payload.id).then(res => {
        if (res) {
          this.purchase.materialId = payload.id
          // this.purchase.name = res.data.data.name
          this.purchase.introduction = res.data.data.introduction
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.id) {
            modifyPurchase(this.id, this.purchase).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.cancel()
              }
            })
            this.$emit('getTable')
          } else {
            addPurchase(this.purchase).then(res => {
              if (res) {
                Message({
                  message: res.data.message,
                  type: 'success',
                  duration: 5 * 1000
                })
                this.$refs[formName].resetFields()
                this.cancel()
              }
            })
            this.$emit('getTable')
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.$emit('closeDialog')
      this.$refs.purchase.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-dialog {
  height: 570px;
  width: 40%;
}
::v-deep .el-dialog__body {
  overflow-y: auto;
  height: 510px;
  padding: 0;
}
.el-form-item{
  margin-bottom: 20px;
}
</style>
